<template>
  <div class="judgment-process">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-nav">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/judgment">地府审判系统</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>审判流程管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 页面头部区域 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">审判流程管理</div>
        <div class="page-subtitle">十殿阎王分工 · 审判程序设置 · 判决结果记录 · 申诉复议处理</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="showProcessConfig">
          <SettingOutlined />
          流程配置
        </a-button>
        <a-button @click="showJudgeManagement">
          <TeamOutlined />
          阎王管理
        </a-button>
      </div>
    </div>

    <!-- 十殿阎王状态面板 -->
    <div class="judges-section">
      <h3 class="section-title">
        <BankOutlined />
        十殿阎王分工状态
      </h3>
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :md="8" :lg="6" v-for="judge in judges" :key="judge.id">
          <div class="judge-card" :class="judge.status">
            <div class="judge-header">
              <div class="judge-avatar">
                <a-avatar :size="48" :style="{ backgroundColor: getJudgeColor(judge.hall) }">
                  {{ judge.hall }}
                </a-avatar>
              </div>
              <div class="judge-info">
                <div class="judge-name">{{ judge.name }}</div>
                <div class="judge-hall">{{ judge.hall }}殿</div>
                <a-badge :status="getStatusBadge(judge.status)" :text="judge.statusText" />
              </div>
            </div>

            <div class="judge-stats">
              <div class="stat-row">
                <span class="stat-label">今日审判:</span>
                <span class="stat-value">{{ judge.todayCount }}</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">待审队列:</span>
                <span class="stat-value">{{ judge.queueCount }}</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">专业领域:</span>
                <span class="stat-value">{{ judge.expertise }}</span>
              </div>
            </div>

            <div class="judge-actions">
              <a-button type="text" size="small" @click="assignCase(judge)"> 分配案件 </a-button>
              <a-button type="text" size="small" @click="viewSchedule(judge)"> 查看排程 </a-button>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <a-row :gutter="[24, 24]">
        <!-- 左侧流程管理 -->
        <a-col :xs="24" :lg="14">
          <!-- 审判程序设置 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <SettingOutlined class="section-icon" />
                审判程序设置
              </h3>
              <a-button type="link" @click="editProcessSettings">编辑设置</a-button>
            </div>

            <div class="process-flow">
              <div v-for="(step, index) in processSteps" :key="step.id" class="process-step">
                <div class="step-number">{{ index + 1 }}</div>
                <div class="step-content">
                  <div class="step-title">{{ step.title }}</div>
                  <div class="step-description">{{ step.description }}</div>
                  <div class="step-config">
                    <span>时限: {{ step.timeLimit }}</span>
                    <span>负责人: {{ step.responsible }}</span>
                    <span>必要条件: {{ step.requirements }}</span>
                  </div>
                </div>
                <div class="step-actions">
                  <a-button type="text" size="small" @click="editStep(step)">
                    <EditOutlined />
                  </a-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 判决结果记录 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <FileTextOutlined class="section-icon" />
                判决结果记录
              </h3>
              <a-button type="link" @click="exportRecords">导出记录</a-button>
            </div>

            <div class="judgment-records">
              <div class="records-filter">
                <a-row :gutter="[16, 16]">
                  <a-col :span="6">
                    <a-select v-model:value="recordsFilter.judge" placeholder="选择阎王">
                      <a-select-option value="">全部阎王</a-select-option>
                      <a-select-option v-for="judge in judges" :key="judge.id" :value="judge.name">
                        {{ judge.name }}
                      </a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="6">
                    <a-select v-model:value="recordsFilter.verdict" placeholder="判决结果">
                      <a-select-option value="">全部结果</a-select-option>
                      <a-select-option value="转世为人">转世为人</a-select-option>
                      <a-select-option value="转世为畜">转世为畜</a-select-option>
                      <a-select-option value="地狱刑罚">地狱刑罚</a-select-option>
                      <a-select-option value="超度投胎">超度投胎</a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="6">
                    <a-date-picker v-model:value="recordsFilter.date" placeholder="选择日期" />
                  </a-col>
                  <a-col :span="6">
                    <a-button @click="searchRecords">搜索</a-button>
                  </a-col>
                </a-row>
              </div>

              <div class="records-list">
                <div v-for="record in filteredRecords" :key="record.id" class="record-item">
                  <div class="record-header">
                    <div class="record-case">{{ record.caseNumber }} - {{ record.deathName }}</div>
                    <div class="record-date">{{ record.judgmentDate }}</div>
                  </div>
                  <div class="record-content">
                    <div class="record-judge">审判阎王: {{ record.judge }}</div>
                    <div class="record-verdict" :class="getVerdictClass(record.verdict)">判决结果: {{ record.verdict }}</div>
                    <div class="record-reason">判决理由: {{ record.reason }}</div>
                  </div>
                  <div class="record-actions">
                    <a-button type="text" size="small" @click="viewRecordDetail(record)"> 查看详情 </a-button>
                    <a-button type="text" size="small" @click="appealRecord(record)" v-if="record.canAppeal"> 申请复议 </a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 右侧管理面板 -->
        <a-col :xs="24" :lg="10">
          <!-- 申诉复议处理 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <ExclamationCircleOutlined class="section-icon" />
                申诉复议处理
              </h3>
              <a-badge :count="appeals.length" :offset="[10, 0]">
                <a-button type="link">查看全部</a-button>
              </a-badge>
            </div>

            <div class="appeals-list">
              <div v-for="appeal in appeals" :key="appeal.id" class="appeal-item">
                <div class="appeal-header">
                  <div class="appeal-case">{{ appeal.caseNumber }}</div>
                  <a-tag :color="getAppealStatusColor(appeal.status)">{{ appeal.status }}</a-tag>
                </div>
                <div class="appeal-content">
                  <div class="appeal-applicant">申请人: {{ appeal.applicant }}</div>
                  <div class="appeal-reason">申诉理由: {{ appeal.reason }}</div>
                  <div class="appeal-date">申请时间: {{ appeal.appealDate }}</div>
                </div>
                <div class="appeal-actions">
                  <a-button type="primary" size="small" @click="processAppeal(appeal, 'approve')"> 同意复议 </a-button>
                  <a-button type="default" size="small" @click="processAppeal(appeal, 'reject')"> 驳回申请 </a-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 审判效率统计 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <BarChartOutlined class="section-icon" />
                审判效率统计
              </h3>
            </div>

            <div class="efficiency-stats">
              <div class="efficiency-item">
                <div class="efficiency-label">平均审判时长</div>
                <div class="efficiency-value">{{ efficiency.avgDuration }}分钟</div>
              </div>
              <div class="efficiency-item">
                <div class="efficiency-label">今日完成率</div>
                <div class="efficiency-value">{{ efficiency.completionRate }}%</div>
              </div>
              <div class="efficiency-item">
                <div class="efficiency-label">申诉成功率</div>
                <div class="efficiency-value">{{ efficiency.appealSuccessRate }}%</div>
              </div>
              <div class="efficiency-item">
                <div class="efficiency-label">流程合规率</div>
                <div class="efficiency-value">{{ efficiency.complianceRate }}%</div>
              </div>
            </div>
          </div>

          <!-- 流程规则配置 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <SettingOutlined class="section-icon" />
                流程规则配置
              </h3>
            </div>

            <div class="rules-config">
              <div class="rule-item">
                <div class="rule-name">自动分配规则</div>
                <a-switch v-model:checked="rules.autoAssign" />
              </div>
              <div class="rule-item">
                <div class="rule-name">紧急案件优先</div>
                <a-switch v-model:checked="rules.urgentPriority" />
              </div>
              <div class="rule-item">
                <div class="rule-name">多级审核制度</div>
                <a-switch v-model:checked="rules.multiLevel" />
              </div>
              <div class="rule-item">
                <div class="rule-name">申诉期限(天)</div>
                <a-input-number v-model:value="rules.appealPeriod" :min="1" :max="30" />
              </div>
            </div>
          </div>

          <!-- 审判日程安排 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <CalendarOutlined class="section-icon" />
                今日审判日程
              </h3>
            </div>

            <div class="schedule-list">
              <div v-for="schedule in todaySchedule" :key="schedule.id" class="schedule-item">
                <div class="schedule-time">{{ schedule.time }}</div>
                <div class="schedule-content">
                  <div class="schedule-case">{{ schedule.caseName }}</div>
                  <div class="schedule-judge">{{ schedule.judge }}</div>
                  <div class="schedule-status" :class="schedule.status">
                    {{ schedule.statusText }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 流程配置弹窗 -->
    <a-modal v-model:open="processConfigVisible" title="审判流程配置" width="800px" @ok="handleProcessConfig">
      <a-tabs>
        <a-tab-pane key="steps" tab="流程步骤">
          <div class="config-steps">
            <div v-for="(step, index) in configSteps" :key="step.id" class="config-step-item">
              <div class="step-info">
                <h4>步骤 {{ index + 1 }}: {{ step.title }}</h4>
                <a-form layout="vertical">
                  <a-row :gutter="16">
                    <a-col :span="12">
                      <a-form-item label="步骤名称">
                        <a-input v-model:value="step.title" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="时间限制">
                        <a-input v-model:value="step.timeLimit" />
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-row :gutter="16">
                    <a-col :span="12">
                      <a-form-item label="负责人">
                        <a-select v-model:value="step.responsible">
                          <a-select-option value="书记官">书记官</a-select-option>
                          <a-select-option value="分案系统">分案系统</a-select-option>
                          <a-select-option value="主审阎王">主审阎王</a-select-option>
                          <a-select-option value="执行部门">执行部门</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="必要条件">
                        <a-input v-model:value="step.requirements" />
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-form-item label="步骤描述">
                    <a-textarea v-model:value="step.description" :rows="2" />
                  </a-form-item>
                </a-form>
              </div>
            </div>
            <a-button type="dashed" @click="addConfigStep" block>
              <PlusOutlined />
              添加步骤
            </a-button>
          </div>
        </a-tab-pane>

        <a-tab-pane key="rules" tab="审判规则">
          <div class="config-rules">
            <a-form layout="vertical">
              <a-form-item label="审判时间设置">
                <a-row :gutter="16">
                  <a-col :span="8">
                    <a-form-item label="普通案件时限(分钟)">
                      <a-input-number v-model:value="ruleConfig.normalTimeLimit" :min="30" :max="300" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="重大案件时限(分钟)">
                      <a-input-number v-model:value="ruleConfig.majorTimeLimit" :min="60" :max="600" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="紧急案件时限(分钟)">
                      <a-input-number v-model:value="ruleConfig.urgentTimeLimit" :min="15" :max="120" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>

              <a-form-item label="审判权限设置">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item label="单独审判权限">
                      <a-checkbox-group v-model:value="ruleConfig.singleJudgeAuth">
                        <a-checkbox value="轻罪">轻罪案件</a-checkbox>
                        <a-checkbox value="民事">民事纠纷</a-checkbox>
                        <a-checkbox value="行政">行政处罚</a-checkbox>
                      </a-checkbox-group>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="合议庭权限">
                      <a-checkbox-group v-model:value="ruleConfig.panelJudgeAuth">
                        <a-checkbox value="重罪">重罪案件</a-checkbox>
                        <a-checkbox value="死刑">死刑复核</a-checkbox>
                        <a-checkbox value="特殊">特殊案件</a-checkbox>
                      </a-checkbox-group>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>

              <a-form-item label="申诉设置">
                <a-row :gutter="16">
                  <a-col :span="8">
                    <a-form-item label="申诉期限(天)">
                      <a-input-number v-model:value="ruleConfig.appealPeriod" :min="1" :max="30" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="最大申诉次数">
                      <a-input-number v-model:value="ruleConfig.maxAppeals" :min="1" :max="5" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="复议成功率(%)">
                      <a-input-number v-model:value="ruleConfig.appealSuccessRate" :min="1" :max="100" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </div>
        </a-tab-pane>

        <a-tab-pane key="assignment" tab="案件分配">
          <div class="config-assignment">
            <h4>阎王专业领域配置</h4>
            <a-table :dataSource="judges" :columns="judgeConfigColumns" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'maxCases'">
                  <a-input-number v-model:value="record.maxCases" :min="1" :max="50" />
                </template>
                <template v-if="column.key === 'expertise'">
                  <a-select v-model:value="record.expertise" mode="multiple" style="width: 100%">
                    <a-select-option value="初审、分类">初审、分类</a-select-option>
                    <a-select-option value="偷盗、淫欲">偷盗、淫欲</a-select-option>
                    <a-select-option value="背义忘恩">背义忘恩</a-select-option>
                    <a-select-option value="抗粮不纳">抗粮不纳</a-select-option>
                    <a-select-option value="杀人放火">杀人放火</a-select-option>
                    <a-select-option value="怨天尤人">怨天尤人</a-select-option>
                    <a-select-option value="刑罚执行">刑罚执行</a-select-option>
                    <a-select-option value="特殊案件">特殊案件</a-select-option>
                    <a-select-option value="公正裁决">公正裁决</a-select-option>
                    <a-select-option value="转世安排">转世安排</a-select-option>
                  </a-select>
                </template>
                <template v-if="column.key === 'priority'">
                  <a-input-number v-model:value="record.priority" :min="1" :max="10" />
                </template>
              </template>
            </a-table>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>

    <!-- 阎王管理弹窗 -->
    <a-modal v-model:open="judgeManagementVisible" title="十殿阎王管理" width="1200px" :footer="null">
      <a-tabs default-active-key="overview" type="card">
        <!-- 阎王概览 -->
        <a-tab-pane key="overview" tab="阎王概览">
          <div class="judges-overview">
            <a-row :gutter="[16, 16]">
              <a-col :xs="24" :sm="12" :lg="8" v-for="judge in judges" :key="judge.id">
                <div class="judge-overview-card" :class="judge.status">
                  <div class="judge-card-header">
                    <div class="judge-avatar-large">
                      <a-avatar :size="60" :style="{ backgroundColor: getJudgeColor(judge.hall), fontSize: '24px' }">
                        {{ judge.avatar }}
                      </a-avatar>
                    </div>
                    <div class="judge-title">
                      <h3>{{ judge.name }}</h3>
                      <div class="judge-hall">{{ judge.hall }}殿阎王</div>
                      <a-tag :color="getJudgeStatusColor(judge.status)" style="margin-top: 8px">
                        {{ judge.statusText }}
                      </a-tag>
                    </div>
                  </div>

                  <div class="judge-card-content">
                    <div class="expertise-section">
                      <div class="section-label">专业领域</div>
                      <div class="expertise-text">{{ judge.expertise }}</div>
                    </div>

                    <div class="performance-metrics">
                      <a-row :gutter="8">
                        <a-col :span="8">
                          <div class="metric-item">
                            <div class="metric-value">{{ judge.todayCount }}</div>
                            <div class="metric-label">今日审判</div>
                          </div>
                        </a-col>
                        <a-col :span="8">
                          <div class="metric-item">
                            <div class="metric-value">{{ judge.queueCount }}</div>
                            <div class="metric-label">队列案件</div>
                          </div>
                        </a-col>
                        <a-col :span="8">
                          <div class="metric-item">
                            <div class="metric-value">{{ judge.efficiency }}%</div>
                            <div class="metric-label">审判效率</div>
                          </div>
                        </a-col>
                      </a-row>
                    </div>

                    <div class="progress-section">
                      <div class="progress-item">
                        <div class="progress-label">
                          <span>工作负荷</span>
                          <span class="progress-value">{{ judge.workload }}%</span>
                        </div>
                        <a-progress :percent="judge.workload" :stroke-color="getWorkloadColor(judge.workload)" size="small" />
                      </div>
                      <div class="progress-item">
                        <div class="progress-label">
                          <span>满意度</span>
                          <span class="progress-value">{{ judge.satisfaction }}%</span>
                        </div>
                        <a-progress :percent="judge.satisfaction" stroke-color="#52c41a" size="small" />
                      </div>
                    </div>
                  </div>

                  <div class="judge-card-actions">
                    <a-button type="text" size="small" @click="viewJudgeDetail(judge)">
                      <EyeOutlined />
                      查看详情
                    </a-button>
                    <a-button type="text" size="small" @click="editJudge(judge)">
                      <EditOutlined />
                      编辑设置
                    </a-button>
                    <a-button type="text" size="small" @click="assignCase(judge)">
                      <UserAddOutlined />
                      分配案件
                    </a-button>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>

        <!-- 统计分析 -->
        <a-tab-pane key="statistics" tab="统计分析">
          <div class="judges-statistics">
            <a-row :gutter="[24, 24]">
              <!-- 整体统计 -->
              <a-col :span="24">
                <div class="overall-stats">
                  <h4>整体统计</h4>
                  <a-row :gutter="16">
                    <a-col :span="6">
                      <a-statistic title="总审判数" :value="judges.reduce((sum, judge) => sum + judge.todayCount, 0)" suffix="件" :value-style="{ color: '#1890ff' }" />
                    </a-col>
                    <a-col :span="6">
                      <a-statistic title="队列案件" :value="judges.reduce((sum, judge) => sum + judge.queueCount, 0)" suffix="件" :value-style="{ color: '#fa8c16' }" />
                    </a-col>
                    <a-col :span="6">
                      <a-statistic title="平均效率" :value="Math.round(judges.reduce((sum, judge) => sum + judge.efficiency, 0) / judges.length)" suffix="%" :value-style="{ color: '#52c41a' }" />
                    </a-col>
                    <a-col :span="6">
                      <a-statistic title="活跃阎王" :value="judges.filter((judge) => judge.status === 'active').length" suffix="位" :value-style="{ color: '#722ed1' }" />
                    </a-col>
                  </a-row>
                </div>
              </a-col>

              <!-- 效率排行 -->
              <a-col :span="12">
                <div class="efficiency-ranking">
                  <h4>审判效率排行</h4>
                  <div class="ranking-list">
                    <div v-for="(judge, index) in [...judges].sort((a, b) => b.efficiency - a.efficiency)" :key="judge.id" class="ranking-item">
                      <div class="ranking-number" :class="getRankingClass(index)">{{ index + 1 }}</div>
                      <div class="ranking-info">
                        <div class="ranking-name">{{ judge.name }}</div>
                        <div class="ranking-hall">{{ judge.hall }}殿</div>
                      </div>
                      <div class="ranking-value">{{ judge.efficiency }}%</div>
                      <div class="ranking-progress">
                        <a-progress :percent="judge.efficiency" size="small" :show-info="false" />
                      </div>
                    </div>
                  </div>
                </div>
              </a-col>

              <!-- 工作量分析 -->
              <a-col :span="12">
                <div class="workload-analysis">
                  <h4>工作量分析</h4>
                  <div class="workload-categories">
                    <div class="category-item">
                      <div class="category-header">
                        <span class="category-label">工作繁忙</span>
                        <span class="category-count">{{ judges.filter((j) => j.workload >= 90).length }}位</span>
                      </div>
                      <div class="category-judges">
                        <a-tag v-for="judge in judges.filter((j) => j.workload >= 90)" :key="judge.id" color="red">
                          {{ judge.name }}
                        </a-tag>
                      </div>
                    </div>

                    <div class="category-item">
                      <div class="category-header">
                        <span class="category-label">工作适中</span>
                        <span class="category-count">{{ judges.filter((j) => j.workload >= 70 && j.workload < 90).length }}位</span>
                      </div>
                      <div class="category-judges">
                        <a-tag v-for="judge in judges.filter((j) => j.workload >= 70 && j.workload < 90)" :key="judge.id" color="orange">
                          {{ judge.name }}
                        </a-tag>
                      </div>
                    </div>

                    <div class="category-item">
                      <div class="category-header">
                        <span class="category-label">工作轻松</span>
                        <span class="category-count">{{ judges.filter((j) => j.workload < 70).length }}位</span>
                      </div>
                      <div class="category-judges">
                        <a-tag v-for="judge in judges.filter((j) => j.workload < 70)" :key="judge.id" color="green">
                          {{ judge.name }}
                        </a-tag>
                      </div>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>

        <!-- 详细信息 -->
        <a-tab-pane key="details" tab="详细信息">
          <div class="judges-details">
            <a-table :dataSource="judges" :columns="judgeDetailColumns" :pagination="{ pageSize: 5, size: 'small' }" size="middle">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'avatar'">
                  <a-avatar :style="{ backgroundColor: getJudgeColor(record.hall) }">
                    {{ record.avatar }}
                  </a-avatar>
                </template>
                <template v-if="column.key === 'status'">
                  <a-tag :color="getJudgeStatusColor(record.status)">
                    {{ record.statusText }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'workload'">
                  <a-progress :percent="record.workload" size="small" :stroke-color="getWorkloadColor(record.workload)" />
                </template>
                <template v-if="column.key === 'efficiency'">
                  <span :style="{ color: record.efficiency >= 90 ? '#52c41a' : record.efficiency >= 80 ? '#fa8c16' : '#ff4d4f' }"> {{ record.efficiency }}% </span>
                </template>
                <template v-if="column.key === 'satisfaction'">
                  <a-rate :value="record.satisfaction / 20" disabled allow-half style="font-size: 14px" />
                  <span style="margin-left: 8px; color: #666">{{ record.satisfaction }}%</span>
                </template>
                <template v-if="column.key === 'action'">
                  <a-button type="text" size="small" @click="viewJudgeDetail(record)">
                    <EyeOutlined />
                  </a-button>
                  <a-button type="text" size="small" @click="editJudge(record)">
                    <EditOutlined />
                  </a-button>
                  <a-button type="text" size="small" @click="assignCase(record)">
                    <UserAddOutlined />
                  </a-button>
                  <a-button type="text" size="small" @click="viewSchedule(record)">
                    <CalendarOutlined />
                  </a-button>
                </template>
              </template>
            </a-table>
          </div>
        </a-tab-pane>

        <!-- 阎王设置 -->
        <a-tab-pane key="settings" tab="阎王设置">
          <div class="judges-settings">
            <a-form layout="vertical">
              <a-row :gutter="16">
                <a-col :span="12">
                  <h4>专业领域配置</h4>
                  <a-table :dataSource="judges.slice(0, 5)" :columns="judgeConfigColumns" :pagination="false" size="small">
                    <template #bodyCell="{ column, record }">
                      <template v-if="column.key === 'maxCases'">
                        <a-input-number v-model:value="record.maxCases" :min="1" :max="50" size="small" />
                      </template>
                      <template v-if="column.key === 'expertise'">
                        <a-select v-model:value="record.expertise" style="width: 100%" size="small">
                          <a-select-option value="初审、分类">初审、分类</a-select-option>
                          <a-select-option value="偷盗、淫欲">偷盗、淫欲</a-select-option>
                          <a-select-option value="背义忘恩">背义忘恩</a-select-option>
                          <a-select-option value="抗粮不纳">抗粮不纳</a-select-option>
                          <a-select-option value="杀人放火">杀人放火</a-select-option>
                          <a-select-option value="怨天尤人">怨天尤人</a-select-option>
                          <a-select-option value="刑罚执行">刑罚执行</a-select-option>
                          <a-select-option value="特殊案件">特殊案件</a-select-option>
                          <a-select-option value="公正裁决">公正裁决</a-select-option>
                          <a-select-option value="转世安排">转世安排</a-select-option>
                        </a-select>
                      </template>
                      <template v-if="column.key === 'priority'">
                        <a-input-number v-model:value="record.priority" :min="1" :max="10" size="small" />
                      </template>
                    </template>
                  </a-table>
                </a-col>

                <a-col :span="12">
                  <h4>系统设置</h4>
                  <div class="system-settings">
                    <div class="setting-item">
                      <a-form-item label="自动分配案件">
                        <a-switch v-model:checked="judgeSettings.autoAssign" />
                        <div class="setting-desc">根据阎王专业领域和工作量自动分配案件</div>
                      </a-form-item>
                    </div>

                    <div class="setting-item">
                      <a-form-item label="工作量均衡">
                        <a-switch v-model:checked="judgeSettings.loadBalance" />
                        <div class="setting-desc">优先将案件分配给工作量较轻的阎王</div>
                      </a-form-item>
                    </div>

                    <div class="setting-item">
                      <a-form-item label="紧急案件优先">
                        <a-switch v-model:checked="judgeSettings.urgentFirst" />
                        <div class="setting-desc">紧急案件优先处理，打断当前审判</div>
                      </a-form-item>
                    </div>

                    <div class="setting-item">
                      <a-form-item label="每日最大案件数">
                        <a-input-number v-model:value="judgeSettings.maxCasesPerDay" :min="10" :max="100" />
                        <div class="setting-desc">每位阎王每日最多可审判的案件数量</div>
                      </a-form-item>
                    </div>

                    <div class="setting-item">
                      <a-form-item label="休息时间设置">
                        <a-time-range-picker v-model:value="judgeSettings.restTime" format="HH:mm" />
                        <div class="setting-desc">阎王的休息时间，此时段不分配新案件</div>
                      </a-form-item>
                    </div>
                  </div>
                </a-col>
              </a-row>

              <a-divider />

              <div class="settings-actions">
                <a-button type="primary" @click="saveJudgeSettings">
                  <SaveOutlined />
                  保存设置
                </a-button>
                <a-button @click="resetJudgeSettings" style="margin-left: 8px">
                  <ReloadOutlined />
                  重置设置
                </a-button>
              </div>
            </a-form>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>

    <!-- 编辑步骤弹窗 -->
    <a-modal v-model:open="editStepVisible" title="编辑流程步骤" @ok="handleEditStep" v-if="currentStep">
      <a-form layout="vertical">
        <a-form-item label="步骤标题" required>
          <a-input v-model:value="currentStep.title" />
        </a-form-item>
        <a-form-item label="步骤描述" required>
          <a-textarea v-model:value="currentStep.description" :rows="3" />
        </a-form-item>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="时间限制" required>
              <a-input v-model:value="currentStep.timeLimit" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="负责人" required>
              <a-select v-model:value="currentStep.responsible">
                <a-select-option value="书记官">书记官</a-select-option>
                <a-select-option value="分案系统">分案系统</a-select-option>
                <a-select-option value="主审阎王">主审阎王</a-select-option>
                <a-select-option value="执行部门">执行部门</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="必要条件" required>
          <a-input v-model:value="currentStep.requirements" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 分配案件弹窗 -->
    <a-modal v-model:open="assignCaseVisible" title="分配案件" width="800px" @ok="handleAssignCase">
      <div v-if="selectedJudge">
        <div class="assign-header">
          <h4>分配给: {{ selectedJudge.name }}({{ selectedJudge.hall }}殿)</h4>
          <p>专业领域: {{ selectedJudge.expertise }}</p>
          <p>当前工作量: {{ selectedJudge.workload }}% (今日已审 {{ selectedJudge.todayCount }} 件，队列中 {{ selectedJudge.queueCount }} 件)</p>
        </div>

        <a-divider />

        <a-form layout="vertical">
          <a-form-item label="选择案件" required>
            <a-select v-model:value="assignForm.caseId" placeholder="请选择要分配的案件" style="width: 100%">
              <a-select-option v-for="case_ in availableCases" :key="case_.id" :value="case_.id"> {{ case_.caseNumber }} - {{ case_.deathName }} ({{ case_.priority }}) </a-select-option>
            </a-select>
          </a-form-item>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="优先级设置">
                <a-select v-model:value="assignForm.priority">
                  <a-select-option value="紧急">紧急处理</a-select-option>
                  <a-select-option value="高">高优先级</a-select-option>
                  <a-select-option value="中">中优先级</a-select-option>
                  <a-select-option value="低">低优先级</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="预计审判时间">
                <a-date-picker v-model:value="assignForm.scheduledTime" show-time placeholder="选择审判时间" style="width: 100%" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-form-item label="分配说明">
            <a-textarea v-model:value="assignForm.description" placeholder="请填写分配说明或特殊要求" :rows="3" />
          </a-form-item>

          <a-form-item label="案件特殊标记">
            <a-checkbox-group v-model:value="assignForm.tags">
              <a-checkbox value="重大案件">重大案件</a-checkbox>
              <a-checkbox value="疑难案件">疑难案件</a-checkbox>
              <a-checkbox value="敏感案件">敏感案件</a-checkbox>
              <a-checkbox value="需复核">需要复核</a-checkbox>
              <a-checkbox value="有申诉">可能有申诉</a-checkbox>
            </a-checkbox-group>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <!-- 查看排程弹窗 -->
    <a-modal v-model:open="scheduleVisible" title="阎王审判排程" width="900px" :footer="null">
      <div v-if="selectedJudge">
        <div class="schedule-header">
          <h4>{{ selectedJudge.name }}({{ selectedJudge.hall }}殿) - 审判排程</h4>
          <a-tag :color="getJudgeColor(selectedJudge.hall)">{{ selectedJudge.statusText }}</a-tag>
        </div>

        <a-tabs>
          <a-tab-pane key="today" tab="今日排程">
            <div class="schedule-content">
              <a-timeline>
                <a-timeline-item v-for="schedule in todayJudgeSchedule" :key="schedule.id" :color="getScheduleColor(schedule.status)">
                  <template #dot>
                    <ClockCircleOutlined v-if="schedule.status === 'pending'" />
                    <CheckCircleOutlined v-if="schedule.status === 'completed'" style="color: #52c41a" />
                    <SyncOutlined v-if="schedule.status === 'processing'" spin style="color: #1890ff" />
                  </template>
                  <div class="schedule-item">
                    <div class="schedule-time-slot">{{ schedule.time }}</div>
                    <div class="schedule-case-info">
                      <div class="case-title">{{ schedule.caseNumber }} - {{ schedule.deathName }}</div>
                      <div class="case-details">{{ schedule.caseType }} | 预计时长: {{ schedule.duration }}分钟</div>
                      <div class="case-status">状态: {{ schedule.statusText }}</div>
                    </div>
                  </div>
                </a-timeline-item>
              </a-timeline>
            </div>
          </a-tab-pane>

          <a-tab-pane key="week" tab="本周排程">
            <div class="week-schedule">
              <a-calendar mode="month" :fullscreen="false">
                <template #dateCellRender="{ current }">
                  <div class="calendar-cell">
                    <div v-for="item in getScheduleByDate(current)" :key="item.id" class="schedule-dot" :style="{ backgroundColor: getScheduleColor(item.status) }">
                      {{ item.caseNumber }}
                    </div>
                  </div>
                </template>
              </a-calendar>
            </div>
          </a-tab-pane>

          <a-tab-pane key="stats" tab="统计分析">
            <div class="schedule-stats">
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-statistic title="今日已审" :value="selectedJudge.todayCount" suffix="件" />
                </a-col>
                <a-col :span="8">
                  <a-statistic title="队列待审" :value="selectedJudge.queueCount" suffix="件" />
                </a-col>
                <a-col :span="8">
                  <a-statistic title="审判效率" :value="selectedJudge.efficiency" suffix="%" />
                </a-col>
              </a-row>
              <a-divider />
              <div class="workload-chart">
                <h5>工作量分布</h5>
                <a-progress :percent="selectedJudge.workload" stroke-color="#1890ff" />
                <p style="margin-top: 10px; color: #666">工作负荷: {{ selectedJudge.workload < 70 ? '轻松' : selectedJudge.workload < 90 ? '适中' : '繁忙' }}</p>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>

    <!-- 判决详情弹窗 -->
    <a-modal v-model:open="recordDetailVisible" title="判决结果详情" width="1000px" :footer="null">
      <div v-if="currentRecord">
        <a-descriptions title="基本信息" :column="2" bordered>
          <a-descriptions-item label="案件编号">{{ currentRecord.caseNumber }}</a-descriptions-item>
          <a-descriptions-item label="死者姓名">{{ currentRecord.deathName }}</a-descriptions-item>
          <a-descriptions-item label="审判阎王">{{ currentRecord.judge }}</a-descriptions-item>
          <a-descriptions-item label="判决时间">{{ currentRecord.judgmentDate }}</a-descriptions-item>
          <a-descriptions-item label="判决结果" :span="2">
            <a-tag :color="getVerdictColor(currentRecord.verdict)" style="font-size: 14px; padding: 4px 12px">
              {{ currentRecord.verdict }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>

        <a-divider />

        <a-tabs>
          <a-tab-pane key="judgment" tab="判决详情">
            <div class="judgment-detail">
              <h4>判决理由</h4>
              <p style="line-height: 1.6; color: #666; margin-bottom: 20px">{{ currentRecord.reason }}</p>

              <h4>审判过程</h4>
              <a-timeline>
                <a-timeline-item v-for="process in currentRecord.judgmentProcess" :key="process.id" :color="process.color">
                  <div class="process-item">
                    <div class="process-time">{{ process.time }}</div>
                    <div class="process-content">
                      <div class="process-title">{{ process.title }}</div>
                      <div class="process-description">{{ process.description }}</div>
                    </div>
                  </div>
                </a-timeline-item>
              </a-timeline>
            </div>
          </a-tab-pane>

          <a-tab-pane key="evidence" tab="证据材料">
            <div class="evidence-section">
              <a-table :dataSource="currentRecord.evidences" :columns="evidenceColumns" :pagination="false">
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'status'">
                    <a-tag :color="record.status === '已验证' ? 'green' : 'orange'">{{ record.status }}</a-tag>
                  </template>
                  <template v-if="column.key === 'action'">
                    <a-button type="link" size="small">查看</a-button>
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>

          <a-tab-pane key="execution" tab="执行情况">
            <div class="execution-section">
              <a-descriptions title="执行安排" :column="1" bordered>
                <a-descriptions-item label="执行部门">{{ currentRecord.execution.department }}</a-descriptions-item>
                <a-descriptions-item label="执行时间">{{ currentRecord.execution.time }}</a-descriptions-item>
                <a-descriptions-item label="执行地点">{{ currentRecord.execution.location }}</a-descriptions-item>
                <a-descriptions-item label="执行状态">
                  <a-tag :color="currentRecord.execution.status === '已执行' ? 'green' : 'orange'">
                    {{ currentRecord.execution.status }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="备注">{{ currentRecord.execution.note }}</a-descriptions-item>
              </a-descriptions>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>

    <!-- 申请复议弹窗 -->
    <a-modal v-model:open="appealVisible" title="申请复议" width="800px" @ok="handleAppealSubmit">
      <div v-if="currentRecord">
        <div class="appeal-header">
          <h4>申请对以下判决进行复议</h4>
          <p><strong>案件编号:</strong> {{ currentRecord.caseNumber }}</p>
          <p><strong>原判决结果:</strong> {{ currentRecord.verdict }}</p>
          <p><strong>原审判阎王:</strong> {{ currentRecord.judge }}</p>
        </div>

        <a-divider />

        <a-form layout="vertical">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="申请人身份" required>
                <a-select v-model:value="appealForm.applicantType">
                  <a-select-option value="死者家属">死者家属</a-select-option>
                  <a-select-option value="死者本人">死者本人</a-select-option>
                  <a-select-option value="法定代理人">法定代理人</a-select-option>
                  <a-select-option value="其他利害关系人">其他利害关系人</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="申请人姓名" required>
                <a-input v-model:value="appealForm.applicantName" placeholder="请输入申请人姓名" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="联系方式" required>
                <a-input v-model:value="appealForm.contact" placeholder="请输入联系方式" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="复议类型" required>
                <a-select v-model:value="appealForm.appealType">
                  <a-select-option value="事实认定错误">事实认定错误</a-select-option>
                  <a-select-option value="法律适用错误">法律适用错误</a-select-option>
                  <a-select-option value="程序违法">程序违法</a-select-option>
                  <a-select-option value="量刑过重">量刑过重</a-select-option>
                  <a-select-option value="新证据发现">新证据发现</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-form-item label="复议理由" required>
            <a-textarea v-model:value="appealForm.reason" placeholder="请详细说明申请复议的理由" :rows="5" />
          </a-form-item>

          <a-form-item label="新证据材料">
            <a-upload v-model:file-list="appealForm.evidences" :before-upload="() => false" multiple :max-count="10">
              <a-button>
                <UploadOutlined />
                上传证据文件
              </a-button>
            </a-upload>
            <div style="margin-top: 8px; color: #666; font-size: 12px">支持上传图片、文档等格式，单个文件不超过10MB，最多10个文件</div>
          </a-form-item>

          <a-form-item label="期望结果">
            <a-checkbox-group v-model:value="appealForm.expectation">
              <a-checkbox value="撤销原判决">撤销原判决</a-checkbox>
              <a-checkbox value="改判结果">改判结果</a-checkbox>
              <a-checkbox value="减轻处罚">减轻处罚</a-checkbox>
              <a-checkbox value="重新审理">重新审理</a-checkbox>
            </a-checkbox-group>
          </a-form-item>

          <a-form-item>
            <a-alert message="申请复议说明" description="1. 申请复议应在原判决书送达之日起15日内提出；2. 每个案件最多可申请复议2次；3. 复议期间原判决暂停执行；4. 复议结果将在30日内作出。" type="info" show-icon />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  SettingOutlined,
  TeamOutlined,
  BankOutlined,
  FileTextOutlined,
  ExclamationCircleOutlined,
  BarChartOutlined,
  CalendarOutlined,
  EditOutlined,
  PlusOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  SyncOutlined,
  UploadOutlined,
  EyeOutlined,
  UserAddOutlined,
  SaveOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue'

// 路由
const router = useRouter()
const route = useRoute()

// 响应式数据
const recordsFilter = ref({
  judge: '',
  verdict: '',
  date: null
})

// 十殿阎王数据
const judges = ref([
  {
    id: 1,
    name: '秦广王',
    hall: '一',
    status: 'active',
    statusText: '审判中',
    todayCount: 12,
    queueCount: 8,
    expertise: '初审、分类',
    efficiency: 92,
    satisfaction: 94,
    workload: 85,
    avatar: '👑',
    maxCases: 30,
    priority: 9
  },
  {
    id: 2,
    name: '楚江王',
    hall: '二',
    status: 'busy',
    statusText: '繁忙',
    todayCount: 15,
    queueCount: 20,
    expertise: '偷盗、淫欲',
    efficiency: 88,
    satisfaction: 91,
    workload: 92,
    avatar: '⚖️',
    maxCases: 25,
    priority: 7
  },
  {
    id: 3,
    name: '宋帝王',
    hall: '三',
    status: 'active',
    statusText: '审判中',
    todayCount: 10,
    queueCount: 12,
    expertise: '背义忘恩',
    efficiency: 85,
    satisfaction: 89,
    workload: 78,
    avatar: '🗡️',
    maxCases: 28,
    priority: 6
  },
  {
    id: 4,
    name: '伍官王',
    hall: '四',
    status: 'rest',
    statusText: '休息中',
    todayCount: 8,
    queueCount: 15,
    expertise: '抗粮不纳',
    efficiency: 90,
    satisfaction: 93,
    workload: 65,
    avatar: '⚔️',
    maxCases: 22,
    priority: 8
  },
  {
    id: 5,
    name: '阎罗王',
    hall: '五',
    status: 'active',
    statusText: '审判中',
    todayCount: 18,
    queueCount: 25,
    expertise: '杀人放火',
    efficiency: 95,
    satisfaction: 97,
    workload: 95,
    avatar: '👹',
    maxCases: 40,
    priority: 10
  },
  {
    id: 6,
    name: '卞城王',
    hall: '六',
    status: 'active',
    statusText: '审判中',
    todayCount: 7,
    queueCount: 10,
    expertise: '怨天尤人',
    efficiency: 87,
    satisfaction: 88,
    workload: 68,
    avatar: '🛡️',
    maxCases: 26,
    priority: 5
  },
  {
    id: 7,
    name: '泰山王',
    hall: '七',
    status: 'active',
    statusText: '审判中',
    todayCount: 14,
    queueCount: 18,
    expertise: '刑罚执行',
    efficiency: 91,
    satisfaction: 90,
    workload: 82,
    avatar: '⛰️',
    maxCases: 32,
    priority: 8
  },
  {
    id: 8,
    name: '都市王',
    hall: '八',
    status: 'busy',
    statusText: '繁忙',
    todayCount: 11,
    queueCount: 22,
    expertise: '特殊案件',
    efficiency: 86,
    satisfaction: 85,
    workload: 89,
    avatar: '🏛️',
    maxCases: 24,
    priority: 7
  },
  {
    id: 9,
    name: '平等王',
    hall: '九',
    status: 'active',
    statusText: '审判中',
    todayCount: 13,
    queueCount: 16,
    expertise: '公正裁决',
    efficiency: 89,
    satisfaction: 92,
    workload: 71,
    avatar: '⚌',
    maxCases: 29,
    priority: 9
  },
  {
    id: 10,
    name: '转轮王',
    hall: '十',
    status: 'rest',
    statusText: '休息中',
    todayCount: 9,
    queueCount: 14,
    expertise: '转世安排',
    efficiency: 93,
    satisfaction: 96,
    workload: 55,
    avatar: '🔄',
    maxCases: 27,
    priority: 6
  }
])

// 审判程序步骤
const processSteps = ref([
  {
    id: 1,
    title: '案件受理',
    description: '接收待审案件，检查材料完整性',
    timeLimit: '30分钟',
    responsible: '书记官',
    requirements: '证据材料齐全'
  },
  {
    id: 2,
    title: '阎王分配',
    description: '根据案件性质分配给相应阎王',
    timeLimit: '15分钟',
    responsible: '分案系统',
    requirements: '案件分类准确'
  },
  {
    id: 3,
    title: '初步审查',
    description: '阎王进行初步审查和罪名认定',
    timeLimit: '45分钟',
    responsible: '主审阎王',
    requirements: '业力记录完整'
  },
  {
    id: 4,
    title: '证据审核',
    description: '详细审核所有证据材料',
    timeLimit: '60分钟',
    responsible: '主审阎王',
    requirements: '证据真实有效'
  },
  {
    id: 5,
    title: '宣读判决',
    description: '宣读最终判决结果',
    timeLimit: '20分钟',
    responsible: '主审阎王',
    requirements: '判决符合法理'
  },
  {
    id: 6,
    title: '执行安排',
    description: '安排判决结果的具体执行',
    timeLimit: '30分钟',
    responsible: '执行部门',
    requirements: '执行方案可行'
  }
])

// 判决记录数据
const judgmentRecords = ref([
  {
    id: 1,
    caseNumber: 'YF-2023-001',
    deathName: '张三',
    judge: '阎罗王',
    verdict: '地狱刑罚',
    reason: '恶意杀害三人，罪大恶极，判十八层地狱受刑三年',
    judgmentDate: '2023-12-10 14:30',
    canAppeal: true,
    judgmentProcess: [
      {
        id: 1,
        time: '2023-12-10 09:00',
        title: '案件受理',
        description: '案件材料接收完毕，证据齐全',
        color: 'green'
      },
      {
        id: 2,
        time: '2023-12-10 09:30',
        title: '阎王分配',
        description: '根据案件性质，分配给五殿阎罗王审理',
        color: 'blue'
      },
      {
        id: 3,
        time: '2023-12-10 10:00',
        title: '初步审查',
        description: '确认死者身份和死因，业力记录完整',
        color: 'blue'
      },
      {
        id: 4,
        time: '2023-12-10 14:00',
        title: '正式审判',
        description: '详细审理案件，听取各方证词',
        color: 'orange'
      },
      {
        id: 5,
        time: '2023-12-10 14:30',
        title: '宣读判决',
        description: '宣读最终判决结果：地狱刑罚三年',
        color: 'red'
      }
    ],
    evidences: [
      {
        id: 1,
        name: '死亡证明',
        type: '官方文件',
        submitTime: '2023-12-10 08:30',
        status: '已验证'
      },
      {
        id: 2,
        name: '犯罪现场照片',
        type: '图像证据',
        submitTime: '2023-12-10 08:45',
        status: '已验证'
      },
      {
        id: 3,
        name: '证人证言录音',
        type: '音频证据',
        submitTime: '2023-12-10 09:15',
        status: '已验证'
      },
      {
        id: 4,
        name: '业力记录',
        type: '灵魂档案',
        submitTime: '2023-12-10 09:30',
        status: '已验证'
      }
    ],
    execution: {
      department: '地狱执行司',
      time: '2023-12-15 00:00',
      location: '十八层地狱',
      status: '已执行',
      note: '已安排至刀山火海层接受刑罚'
    }
  },
  {
    id: 2,
    caseNumber: 'YF-2023-002',
    deathName: '李四',
    judge: '楚江王',
    verdict: '转世为畜',
    reason: '贪污受贿，道德败坏，判转世为猪三世',
    judgmentDate: '2023-12-11 10:15',
    canAppeal: true,
    judgmentProcess: [
      {
        id: 1,
        time: '2023-12-11 08:00',
        title: '案件受理',
        description: '接收案件材料，初步分类',
        color: 'green'
      },
      {
        id: 2,
        time: '2023-12-11 08:30',
        title: '阎王分配',
        description: '分配给二殿楚江王处理贪腐案件',
        color: 'blue'
      },
      {
        id: 3,
        time: '2023-12-11 09:30',
        title: '审判开始',
        description: '审查贪污受贿事实和金额',
        color: 'orange'
      },
      {
        id: 4,
        time: '2023-12-11 10:15',
        title: '宣读判决',
        description: '判决转世为畜生三世以偿罪孽',
        color: 'orange'
      }
    ],
    evidences: [
      {
        id: 1,
        name: '死亡证明',
        type: '官方文件',
        submitTime: '2023-12-11 07:30',
        status: '已验证'
      },
      {
        id: 2,
        name: '银行记录',
        type: '财务证据',
        submitTime: '2023-12-11 08:00',
        status: '已验证'
      },
      {
        id: 3,
        name: '受贿清单',
        type: '书面证据',
        submitTime: '2023-12-11 08:15',
        status: '已验证'
      }
    ],
    execution: {
      department: '转世投胎司',
      time: '2023-12-20 00:00',
      location: '六道轮回台',
      status: '待执行',
      note: '等待安排投胎为猪'
    }
  },
  {
    id: 3,
    caseNumber: 'YF-2023-003',
    deathName: '王五',
    judge: '秦广王',
    verdict: '转世为人',
    reason: '意外死亡，生前善良，判转世为人投胎富贵人家',
    judgmentDate: '2023-12-11 16:45',
    canAppeal: false,
    judgmentProcess: [
      {
        id: 1,
        time: '2023-12-11 14:00',
        title: '案件受理',
        description: '接收意外死亡案件材料',
        color: 'green'
      },
      {
        id: 2,
        time: '2023-12-11 14:30',
        title: '生平审查',
        description: '查验生前善恶记录，确认善人身份',
        color: 'blue'
      },
      {
        id: 3,
        time: '2023-12-11 16:00',
        title: '福报计算',
        description: '计算生前积德行善的福报',
        color: 'green'
      },
      {
        id: 4,
        time: '2023-12-11 16:45',
        title: '善报判决',
        description: '判决转世为人，投胎富贵之家',
        color: 'green'
      }
    ],
    evidences: [
      {
        id: 1,
        name: '死亡证明',
        type: '官方文件',
        submitTime: '2023-12-11 13:30',
        status: '已验证'
      },
      {
        id: 2,
        name: '善行记录',
        type: '功德档案',
        submitTime: '2023-12-11 14:00',
        status: '已验证'
      },
      {
        id: 3,
        name: '意外事故报告',
        type: '调查报告',
        submitTime: '2023-12-11 14:15',
        status: '已验证'
      }
    ],
    execution: {
      department: '转世投胎司',
      time: '2023-12-25 00:00',
      location: '人道轮回台',
      status: '已安排',
      note: '已选定富贵人家进行投胎'
    }
  }
])

// 申诉案件数据
const appeals = ref([
  {
    id: 1,
    caseNumber: 'YF-2023-001',
    applicant: '张三家属',
    reason: '认为量刑过重，请求减刑',
    appealDate: '2023-12-12 09:00',
    status: '待处理'
  },
  {
    id: 2,
    caseNumber: 'YF-2023-005',
    applicant: '钱七本人',
    reason: '新发现证据，证明并非故意犯罪',
    appealDate: '2023-12-12 14:20',
    status: '审理中'
  }
])

// 审判效率统计
const efficiency = ref({
  avgDuration: 95,
  completionRate: 87.5,
  appealSuccessRate: 15.2,
  complianceRate: 96.8
})

// 流程规则配置
const rules = ref({
  autoAssign: true,
  urgentPriority: true,
  multiLevel: false,
  appealPeriod: 7
})

// 今日审判日程
const todaySchedule = ref([
  { id: 1, time: '09:00', caseName: '张三案', judge: '阎罗王', status: 'completed', statusText: '已完成' },
  { id: 2, time: '10:30', caseName: '李四案', judge: '楚江王', status: 'in-progress', statusText: '审理中' },
  { id: 3, time: '14:00', caseName: '王五案', judge: '秦广王', status: 'scheduled', statusText: '已安排' },
  { id: 4, time: '16:00', caseName: '赵六案', judge: '宋帝王', status: 'pending', statusText: '等待中' }
])

// 弹窗状态
const processConfigVisible = ref(false)
const judgeManagementVisible = ref(false)
const editStepVisible = ref(false)
const assignCaseVisible = ref(false)
const scheduleVisible = ref(false)
const recordDetailVisible = ref(false)
const appealVisible = ref(false)
const currentStep = ref(null)
const selectedJudge = ref(null)
const currentRecord = ref(null)

// 配置步骤数据
const configSteps = ref([...processSteps.value])

// 分配案件表单数据
const assignForm = ref({
  caseId: null,
  priority: '中',
  scheduledTime: null,
  description: '',
  tags: []
})

// 申请复议表单数据
const appealForm = ref({
  applicantType: '',
  applicantName: '',
  contact: '',
  appealType: '',
  reason: '',
  evidences: [],
  expectation: []
})

// 可分配的案件数据
const availableCases = ref([
  {
    id: 1,
    caseNumber: 'YF-2023-015',
    deathName: '陈某',
    priority: '紧急',
    caseType: '谋杀案件',
    deathDate: '2023-12-20'
  },
  {
    id: 2,
    caseNumber: 'YF-2023-016',
    deathName: '李某某',
    priority: '高',
    caseType: '交通肇事',
    deathDate: '2023-12-19'
  },
  {
    id: 3,
    caseNumber: 'YF-2023-017',
    deathName: '王某',
    priority: '中',
    caseType: '意外死亡',
    deathDate: '2023-12-18'
  },
  {
    id: 4,
    caseNumber: 'YF-2023-018',
    deathName: '张某某',
    priority: '中',
    caseType: '自然死亡',
    deathDate: '2023-12-17'
  }
])

// 阎王今日排程数据
const todayJudgeSchedule = ref([
  {
    id: 1,
    time: '09:00-10:00',
    caseNumber: 'YF-2023-001',
    deathName: '张三',
    caseType: '谋杀案',
    duration: 60,
    status: 'completed',
    statusText: '已完成'
  },
  {
    id: 2,
    time: '10:30-11:30',
    caseNumber: 'YF-2023-002',
    deathName: '李四',
    caseType: '贪污受贿',
    duration: 60,
    status: 'processing',
    statusText: '审理中'
  },
  {
    id: 3,
    time: '14:00-15:00',
    caseNumber: 'YF-2023-003',
    deathName: '王五',
    caseType: '交通事故',
    duration: 60,
    status: 'pending',
    statusText: '等待审理'
  },
  {
    id: 4,
    time: '15:30-16:30',
    caseNumber: 'YF-2023-004',
    deathName: '赵六',
    caseType: '见义勇为',
    duration: 60,
    status: 'pending',
    statusText: '等待审理'
  }
])

// 证据表格列
const evidenceColumns = [
  {
    title: '证据名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '证据类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '提交时间',
    dataIndex: 'submitTime',
    key: 'submitTime'
  },
  {
    title: '验证状态',
    key: 'status'
  },
  {
    title: '操作',
    key: 'action'
  }
]

// 阎王设置
const judgeSettings = ref({
  autoAssign: true,
  loadBalance: true,
  urgentFirst: true,
  maxCasesPerDay: 30,
  restTime: null
})

// 规则配置
const ruleConfig = ref({
  normalTimeLimit: 60,
  majorTimeLimit: 120,
  urgentTimeLimit: 30,
  singleJudgeAuth: ['轻罪', '民事'],
  panelJudgeAuth: ['重罪', '死刑'],
  appealPeriod: 7,
  maxAppeals: 3,
  appealSuccessRate: 15
})

// 阎王配置表格列
const judgeConfigColumns = [
  {
    title: '阎王',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '殿堂',
    dataIndex: 'hall',
    key: 'hall'
  },
  {
    title: '专业领域',
    dataIndex: 'expertise',
    key: 'expertise'
  },
  {
    title: '每日最大案件数',
    key: 'maxCases'
  },
  {
    title: '优先级权重',
    key: 'priority'
  }
]

// 阎王详细表格列
const judgeDetailColumns = [
  {
    title: '头像',
    key: 'avatar',
    width: 60
  },
  {
    title: '阎王',
    dataIndex: 'name',
    key: 'name',
    width: 80
  },
  {
    title: '殿堂',
    dataIndex: 'hall',
    key: 'hall',
    width: 60
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80
  },
  {
    title: '今日审判',
    dataIndex: 'todayCount',
    key: 'todayCount',
    width: 80
  },
  {
    title: '队列案件',
    dataIndex: 'queueCount',
    key: 'queueCount',
    width: 80
  },
  {
    title: '工作量',
    key: 'workload',
    width: 100
  },
  {
    title: '效率',
    key: 'efficiency',
    width: 70
  },
  {
    title: '满意度',
    key: 'satisfaction',
    width: 120
  },
  {
    title: '操作',
    key: 'action',
    width: 150
  }
]

// 计算属性
const filteredRecords = computed(() => {
  let filtered = judgmentRecords.value

  if (recordsFilter.value.judge) {
    filtered = filtered.filter((record) => record.judge === recordsFilter.value.judge)
  }

  if (recordsFilter.value.verdict) {
    filtered = filtered.filter((record) => record.verdict === recordsFilter.value.verdict)
  }

  return filtered
})

// 方法
const getJudgeColor = (hall) => {
  const colors = {
    一: '#f56565',
    二: '#ed8936',
    三: '#ecc94b',
    四: '#48bb78',
    五: '#38b2ac',
    六: '#4299e1'
  }
  return colors[hall] || '#805ad5'
}

const getStatusBadge = (status) => {
  const badges = {
    active: 'processing',
    busy: 'warning',
    rest: 'default'
  }
  return badges[status] || 'default'
}

const getVerdictClass = (verdict) => {
  const classes = {
    转世为人: 'verdict-good',
    转世为畜: 'verdict-normal',
    地狱刑罚: 'verdict-bad',
    超度投胎: 'verdict-excellent'
  }
  return classes[verdict] || ''
}

const getAppealStatusColor = (status) => {
  const colors = {
    待处理: 'orange',
    审理中: 'blue',
    已同意: 'green',
    已驳回: 'red'
  }
  return colors[status] || 'default'
}

const showProcessConfig = () => {
  processConfigVisible.value = true
}

const showJudgeManagement = () => {
  judgeManagementVisible.value = true
}

const assignCase = (judge) => {
  selectedJudge.value = judge
  assignCaseVisible.value = true
}

const viewSchedule = (judge) => {
  selectedJudge.value = judge
  scheduleVisible.value = true
}

const editProcessSettings = () => {
  processConfigVisible.value = true
}

const editStep = (step) => {
  currentStep.value = { ...step }
  editStepVisible.value = true
}

// 流程配置处理
const handleProcessConfig = () => {
  // 保存配置
  processSteps.value = [...configSteps.value]
  processConfigVisible.value = false
}

const addConfigStep = () => {
  const newStep = {
    id: configSteps.value.length + 1,
    title: '新步骤',
    description: '步骤描述',
    timeLimit: '30分钟',
    responsible: '书记官',
    requirements: '完成条件'
  }
  configSteps.value.push(newStep)
}

// 阎王管理处理
const handleJudgeManagement = () => {
  judgeManagementVisible.value = false
}

const getJudgeStatusColor = (status) => {
  const colors = {
    active: 'green',
    busy: 'orange',
    rest: 'default'
  }
  return colors[status] || 'default'
}

const editJudge = (judge) => {
  console.log('编辑阎王', judge.name)
}

const viewJudgeDetail = (judge) => {
  console.log('查看阎王详情', judge.name)
}

// 编辑步骤处理
const handleEditStep = () => {
  const index = processSteps.value.findIndex((step) => step.id === currentStep.value.id)
  if (index > -1) {
    processSteps.value[index] = { ...currentStep.value }
  }
  editStepVisible.value = false
}

const exportRecords = () => {
  console.log('导出记录')
}

const searchRecords = () => {
  console.log('搜索记录')
}

const viewRecordDetail = (record) => {
  currentRecord.value = record
  recordDetailVisible.value = true
}

const appealRecord = (record) => {
  currentRecord.value = record
  appealVisible.value = true
}

const processAppeal = (appeal, action) => {
  console.log('处理申诉', appeal, action)
}

// 分配案件处理
const handleAssignCase = () => {
  if (!assignForm.value.caseId || !assignForm.value.priority) {
    return
  }

  const selectedCase = availableCases.value.find((c) => c.id === assignForm.value.caseId)
  if (selectedCase && selectedJudge.value) {
    // 更新阎王的队列数量
    selectedJudge.value.queueCount += 1

    // 从可分配案件中移除
    const caseIndex = availableCases.value.findIndex((c) => c.id === assignForm.value.caseId)
    if (caseIndex > -1) {
      availableCases.value.splice(caseIndex, 1)
    }

    // 清空表单
    resetAssignForm()
    assignCaseVisible.value = false

    console.log(`案件 ${selectedCase.caseNumber} 已分配给 ${selectedJudge.value.name}`)
  }
}

// 申请复议处理
const handleAppealSubmit = () => {
  if (!appealForm.value.applicantName || !appealForm.value.reason || !appealForm.value.appealType) {
    return
  }

  // 创建新的申诉记录
  const newAppeal = {
    id: appeals.value.length + 1,
    caseNumber: currentRecord.value.caseNumber,
    applicant: appealForm.value.applicantName,
    reason: appealForm.value.reason,
    appealDate: new Date().toLocaleString('zh-CN'),
    status: '待处理'
  }

  appeals.value.unshift(newAppeal)

  // 清空表单
  resetAppealForm()
  appealVisible.value = false

  console.log('复议申请已提交', newAppeal)
}

// 重置表单方法
const resetAssignForm = () => {
  assignForm.value = {
    caseId: null,
    priority: '中',
    scheduledTime: null,
    description: '',
    tags: []
  }
}

const resetAppealForm = () => {
  appealForm.value = {
    applicantType: '',
    applicantName: '',
    contact: '',
    appealType: '',
    reason: '',
    evidences: [],
    expectation: []
  }
}

// 获取排程颜色
const getScheduleColor = (status) => {
  const colors = {
    completed: '#52c41a',
    processing: '#1890ff',
    pending: '#faad14',
    cancelled: '#f5222d'
  }
  return colors[status] || '#d9d9d9'
}

// 根据日期获取排程
const getScheduleByDate = (date) => {
  // 模拟根据日期获取排程数据
  const dateStr = date.format('YYYY-MM-DD')
  const today = new Date().toISOString().split('T')[0]

  if (dateStr === today) {
    return todayJudgeSchedule.value.slice(0, 2)
  }
  return []
}

// 获取判决结果颜色
const getVerdictColor = (verdict) => {
  const colors = {
    转世为人: 'green',
    转世为畜: 'orange',
    地狱刑罚: 'red',
    超度投胎: 'blue'
  }
  return colors[verdict] || 'default'
}

// 新增辅助方法
const getWorkloadColor = (workload) => {
  if (workload >= 90) return '#ff4d4f'
  if (workload >= 70) return '#fa8c16'
  return '#52c41a'
}

const getRankingClass = (index) => {
  if (index === 0) return 'first'
  if (index === 1) return 'second'
  if (index === 2) return 'third'
  return 'normal'
}

const saveJudgeSettings = () => {
  message.success('阎王设置保存成功')
}

const resetJudgeSettings = () => {
  Object.assign(judgeSettings.value, {
    autoAssign: true,
    loadBalance: true,
    urgentFirst: true,
    maxCasesPerDay: 30,
    restTime: null
  })
  message.success('设置已重置为默认值')
}

// 生命周期
onMounted(() => {
  console.log('审判流程管理页面已加载')
})
</script>

<style lang="scss" scoped>
.judgment-process {
  padding: 0;

  // 面包屑导航
  .breadcrumb-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;

    .current-route {
      font-size: 12px;
      color: $text-tertiary;
      background: rgba(255, 255, 255, 0.1);
      padding: 4px 8px;
      border-radius: 4px;
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;

    .header-content {
      .page-title {
        font-size: 28px;
        font-weight: bold;
        color: $text-primary;
        margin-bottom: 8px;
      }

      .page-subtitle {
        font-size: 14px;
        color: $text-secondary;
        letter-spacing: 1px;
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }

  // 阎王状态区域
  .judges-section {
    margin-bottom: 32px;

    .section-title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 24px;

      .anticon {
        margin-right: 12px;
        color: $primary-color;
      }
    }

    .judge-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 20px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(114, 46, 209, 0.3);
      }

      &.active {
        border-color: rgba(82, 196, 26, 0.5);
      }

      &.busy {
        border-color: rgba(245, 84, 28, 0.5);
      }

      &.rest {
        border-color: rgba(255, 255, 255, 0.2);
      }

      .judge-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .judge-avatar {
          margin-right: 16px;
        }

        .judge-info {
          flex: 1;

          .judge-name {
            font-size: 16px;
            font-weight: 600;
            color: $text-primary;
            margin-bottom: 4px;
          }

          .judge-hall {
            font-size: 12px;
            color: $text-secondary;
            margin-bottom: 6px;
          }
        }
      }

      .judge-stats {
        margin-bottom: 16px;

        .stat-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 6px;
          font-size: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          .stat-label {
            color: $text-secondary;
          }

          .stat-value {
            color: $text-primary;
            font-weight: 500;
          }
        }
      }

      .judge-actions {
        display: flex;
        gap: 8px;
      }
    }
  }

  // 主要内容区域
  .main-content {
    .section-wrapper {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 24px;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .section-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: $text-primary;
          margin: 0;

          .section-icon {
            font-size: 20px;
            margin-right: 12px;
            color: $primary-color;
          }
        }
      }
    }

    // 流程步骤
    .process-flow {
      .process-step {
        display: flex;
        align-items: flex-start;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .step-number {
          width: 32px;
          height: 32px;
          background: $primary-color;
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          margin-right: 16px;
          flex-shrink: 0;
        }

        .step-content {
          flex: 1;

          .step-title {
            font-size: 16px;
            font-weight: 600;
            color: $text-primary;
            margin-bottom: 6px;
          }

          .step-description {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 8px;
          }

          .step-config {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: $text-tertiary;

            span {
              background: rgba(255, 255, 255, 0.1);
              padding: 2px 6px;
              border-radius: 3px;
            }
          }
        }

        .step-actions {
          margin-left: 16px;
        }
      }
    }

    // 判决记录
    .judgment-records {
      .records-filter {
        margin-bottom: 20px;
      }

      .records-list {
        .record-item {
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 8px;
          padding: 16px;
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            .record-case {
              font-size: 16px;
              font-weight: 600;
              color: $text-primary;
            }

            .record-date {
              font-size: 12px;
              color: $text-tertiary;
            }
          }

          .record-content {
            margin-bottom: 12px;

            .record-judge,
            .record-verdict,
            .record-reason {
              font-size: 13px;
              margin-bottom: 4px;
            }

            .record-judge {
              color: $text-secondary;
            }

            .record-verdict {
              font-weight: 500;

              &.verdict-excellent {
                color: #52c41a;
              }

              &.verdict-good {
                color: #1890ff;
              }

              &.verdict-normal {
                color: #fa8c16;
              }

              &.verdict-bad {
                color: #ff4d4f;
              }
            }

            .record-reason {
              color: $text-secondary;
              line-height: 1.4;
            }
          }

          .record-actions {
            display: flex;
            gap: 8px;
          }
        }
      }
    }

    // 申诉列表
    .appeals-list {
      .appeal-item {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .appeal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .appeal-case {
            font-size: 14px;
            font-weight: 600;
            color: $text-primary;
          }
        }

        .appeal-content {
          margin-bottom: 12px;

          .appeal-applicant,
          .appeal-reason,
          .appeal-date {
            font-size: 12px;
            margin-bottom: 4px;
          }

          .appeal-applicant {
            color: $text-secondary;
          }

          .appeal-reason {
            color: $text-primary;
            line-height: 1.4;
          }

          .appeal-date {
            color: $text-tertiary;
          }
        }

        .appeal-actions {
          display: flex;
          gap: 8px;
        }
      }
    }

    // 效率统计
    .efficiency-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;

      .efficiency-item {
        text-align: center;
        padding: 16px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;

        .efficiency-label {
          font-size: 12px;
          color: $text-secondary;
          margin-bottom: 8px;
        }

        .efficiency-value {
          font-size: 18px;
          font-weight: 600;
          color: $text-primary;
        }
      }
    }

    // 规则配置
    .rules-config {
      .rule-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .rule-name {
          font-size: 14px;
          color: $text-primary;
        }
      }
    }

    // 日程列表
    .schedule-list {
      .schedule-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .schedule-time {
          font-size: 12px;
          color: $text-secondary;
          width: 50px;
          flex-shrink: 0;
        }

        .schedule-content {
          flex: 1;
          margin-left: 12px;

          .schedule-case {
            font-size: 14px;
            color: $text-primary;
            margin-bottom: 2px;
          }

          .schedule-judge {
            font-size: 12px;
            color: $text-tertiary;
            margin-bottom: 2px;
          }

          .schedule-status {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;

            &.completed {
              background: rgba(82, 196, 26, 0.2);
              color: #52c41a;
            }

            &.in-progress {
              background: rgba(24, 144, 255, 0.2);
              color: #1890ff;
            }

            &.scheduled {
              background: rgba(255, 255, 255, 0.1);
              color: $text-tertiary;
            }

            &.pending {
              background: rgba(245, 84, 28, 0.2);
              color: #fa541c;
            }
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .judgment-process {
    .breadcrumb-nav {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .page-header {
      flex-direction: column;
      gap: 16px;

      .header-actions {
        width: 100%;
        justify-content: stretch;

        .ant-btn {
          flex: 1;
        }
      }
    }

    .judges-section {
      .judge-card {
        .judge-header {
          flex-direction: column;
          text-align: center;

          .judge-avatar {
            margin-right: 0;
            margin-bottom: 12px;
          }
        }
      }
    }

    .efficiency-stats {
      grid-template-columns: 1fr;
    }
  }

  // 弹窗相关样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(20, 20, 30, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
    }

    .ant-modal-header {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: $text-primary;
      }
    }

    .ant-modal-body {
      color: $text-primary;
    }
  }

  .config-steps {
    .config-step-item {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;

      .step-info h4 {
        color: $text-primary;
        margin-bottom: 16px;
      }
    }
  }

  .judge-stats-chart {
    .judge-stat-item {
      margin-bottom: 20px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;

      .judge-name {
        font-size: 14px;
        font-weight: 600;
        color: $text-primary;
        margin-bottom: 8px;
      }

      .stat-bars {
        .stat-bar {
          display: flex;
          align-items: center;
          margin-bottom: 8px;

          span {
            min-width: 60px;
            font-size: 12px;
            color: $text-secondary;
          }

          :deep(.ant-progress) {
            flex: 1;
            margin-left: 8px;
          }
        }
      }
    }
  }

  :deep(.ant-form-item-label > label) {
    color: $text-primary;
  }

  :deep(.ant-input),
  :deep(.ant-input-number),
  :deep(.ant-select-selector),
  :deep(.ant-checkbox-wrapper) {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: $text-primary;

    &:hover {
      border-color: $primary-color;
    }

    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
    }
  }

  :deep(.ant-checkbox-wrapper) {
    color: $text-primary;
  }

  :deep(.ant-select-dropdown) {
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);

    .ant-select-item {
      color: $text-primary;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }

  :deep(.ant-table) {
    background: transparent;

    .ant-table-thead > tr > th {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      color: $text-primary;
    }

    .ant-table-tbody > tr > td {
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      color: $text-secondary;
    }

    .ant-table-tbody > tr:hover > td {
      background: rgba(255, 255, 255, 0.05);
    }
  }

  // 新增弹窗样式
  .assign-header,
  .schedule-header,
  .appeal-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;

    h4 {
      color: $text-primary;
      margin-bottom: 8px;
    }

    p {
      color: $text-secondary;
      margin-bottom: 4px;
    }
  }

  .schedule-content {
    .schedule-item {
      .schedule-time-slot {
        font-weight: bold;
        color: $primary-color;
        margin-bottom: 4px;
      }

      .schedule-case-info {
        .case-title {
          font-size: 16px;
          font-weight: 600;
          color: $text-primary;
          margin-bottom: 4px;
        }

        .case-details,
        .case-status {
          font-size: 12px;
          color: $text-secondary;
          margin-bottom: 2px;
        }
      }
    }
  }

  .calendar-cell {
    .schedule-dot {
      width: 100%;
      height: 20px;
      border-radius: 4px;
      font-size: 10px;
      color: white;
      text-align: center;
      line-height: 20px;
      margin-bottom: 2px;
    }
  }

  .schedule-stats {
    .workload-chart {
      margin-top: 20px;

      h5 {
        color: $text-primary;
        margin-bottom: 12px;
      }
    }
  }

  .judgment-detail {
    h4 {
      color: $text-primary;
      margin-bottom: 12px;
    }

    .process-item {
      display: flex;
      flex-direction: column;

      .process-time {
        font-size: 12px;
        color: $text-tertiary;
        margin-bottom: 4px;
      }

      .process-content {
        .process-title {
          font-weight: 600;
          color: $text-primary;
          margin-bottom: 4px;
        }

        .process-description {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }

  .evidence-section,
  .execution-section {
    :deep(.ant-table) {
      background: transparent;

      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: $text-primary;
      }

      .ant-table-tbody > tr > td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: $text-secondary;
      }
    }
  }

  :deep(.ant-timeline) {
    .ant-timeline-item-content {
      color: $text-primary;
    }
  }

  :deep(.ant-descriptions) {
    .ant-descriptions-header {
      .ant-descriptions-title {
        color: $text-primary;
      }
    }

    .ant-descriptions-item-label {
      color: $text-secondary;
    }

    .ant-descriptions-item-content {
      color: $text-primary;
    }
  }

  :deep(.ant-calendar) {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);

    .ant-calendar-cell {
      border-color: rgba(255, 255, 255, 0.1);
      color: $text-primary;
    }
  }

  :deep(.ant-upload) {
    .ant-upload-btn {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.2);
      color: $text-primary;
    }
  }

  :deep(.ant-alert) {
    background: rgba(24, 144, 255, 0.1);
    border-color: rgba(24, 144, 255, 0.3);

    .ant-alert-message,
    .ant-alert-description {
      color: $text-primary;
    }
  }

  // 阎王管理模态框样式
  .judges-overview {
    .judge-overview-card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 20px;
      transition: all 0.3s ease;
      height: 100%;

      &:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(114, 46, 209, 0.3);
        transform: translateY(-2px);
      }

      &.active {
        border-color: rgba(82, 196, 26, 0.5);
      }

      &.busy {
        border-color: rgba(245, 84, 28, 0.5);
      }

      &.rest {
        border-color: rgba(255, 255, 255, 0.2);
      }

      .judge-card-header {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;

        .judge-avatar-large {
          margin-right: 16px;
        }

        .judge-title {
          flex: 1;

          h3 {
            font-size: 18px;
            font-weight: 600;
            color: $text-primary;
            margin: 0 0 4px 0;
          }

          .judge-hall {
            font-size: 12px;
            color: $text-secondary;
            margin-bottom: 8px;
          }
        }
      }

      .judge-card-content {
        .expertise-section {
          margin-bottom: 20px;

          .section-label {
            font-size: 12px;
            color: $text-secondary;
            margin-bottom: 6px;
          }

          .expertise-text {
            font-size: 14px;
            color: $text-primary;
            font-weight: 500;
          }
        }

        .performance-metrics {
          margin-bottom: 20px;

          .metric-item {
            text-align: center;

            .metric-value {
              font-size: 18px;
              font-weight: 600;
              color: $text-primary;
              line-height: 1;
            }

            .metric-label {
              font-size: 10px;
              color: $text-secondary;
              margin-top: 4px;
            }
          }
        }

        .progress-section {
          .progress-item {
            margin-bottom: 12px;

            &:last-child {
              margin-bottom: 0;
            }

            .progress-label {
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              margin-bottom: 4px;

              .progress-value {
                font-weight: 500;
                color: $text-primary;
              }
            }
          }
        }
      }

      .judge-card-actions {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 16px;
        margin-top: 16px;

        .ant-btn {
          font-size: 12px;
          height: 28px;
          padding: 4px 8px;
          border: none;
          color: $text-secondary;

          &:hover {
            color: $primary-color;
            background: rgba(114, 46, 209, 0.1);
          }

          .anticon {
            margin-right: 4px;
          }
        }
      }
    }
  }

  // 统计分析样式
  .judges-statistics {
    .overall-stats {
      padding: 20px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      margin-bottom: 24px;

      h4 {
        margin-bottom: 16px;
        color: $text-primary;
      }
    }

    .efficiency-ranking {
      padding: 20px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;

      h4 {
        margin-bottom: 16px;
        color: $text-primary;
      }

      .ranking-list {
        .ranking-item {
          display: flex;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);

          &:last-child {
            border-bottom: none;
          }

          .ranking-number {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: 600;
            margin-right: 12px;

            &.first {
              background: linear-gradient(135deg, #ffd700, #ffb300);
              color: #fff;
            }

            &.second {
              background: linear-gradient(135deg, #c0c0c0, #999999);
              color: #fff;
            }

            &.third {
              background: linear-gradient(135deg, #cd7f32, #a0522d);
              color: #fff;
            }

            &.normal {
              background: rgba(255, 255, 255, 0.1);
              color: $text-secondary;
            }
          }

          .ranking-info {
            flex: 1;
            margin-right: 16px;

            .ranking-name {
              font-size: 14px;
              color: $text-primary;
              margin-bottom: 2px;
            }

            .ranking-hall {
              font-size: 12px;
              color: $text-secondary;
            }
          }

          .ranking-value {
            font-weight: 600;
            color: $text-primary;
            margin-right: 16px;
            min-width: 50px;
          }

          .ranking-progress {
            width: 80px;
          }
        }
      }
    }

    .workload-analysis {
      padding: 20px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;

      h4 {
        margin-bottom: 16px;
        color: $text-primary;
      }

      .workload-categories {
        .category-item {
          margin-bottom: 16px;

          &:last-child {
            margin-bottom: 0;
          }

          .category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;

            .category-label {
              font-size: 14px;
              color: $text-primary;
              font-weight: 500;
            }

            .category-count {
              font-size: 12px;
              color: $text-secondary;
            }
          }

          .category-judges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
          }
        }
      }
    }
  }

  // 阎王设置样式
  .judges-settings {
    .system-settings {
      .setting-item {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .setting-desc {
          font-size: 12px;
          color: $text-secondary;
          margin-top: 4px;
          line-height: 1.4;
        }
      }
    }

    .settings-actions {
      text-align: center;
      padding-top: 16px;
    }
  }
}
</style>
